<template>
  <div>
    <!-- 文字内容 -->
    <div class="forex_content">

      <div class="container clearfix">
        <div class="may_title">
          登入代理专区
        </div>
        <form class="login-form">
          <input name="__RequestVerificationToken" type="hidden" value="" />
          <div class="may_login clearfix">
            <div class="header">
            </div>
            <input data-val="true" data-val-required="The Assistant field is required." id="Assistant" name="Assistant" type="checkbox" value="true" />
            <input name="Assistant" type="hidden" value="false" />
            <label>助理</label>
            <div>
              <i class="glyphicon glyphicon-user"></i>
              <input class="input username" data-val="true" data-val-required="*" id="AdviserNo" name="AdviserNo" placeholder="账号" type="text" value="" />
              <div class="user-icon"></div>
              <span class="field-validation-valid" data-valmsg-for="AdviserNo" data-valmsg-replace="true" style="color:red"></span>
            </div>
            <div>
              <i class="glyphicon glyphicon-lock"></i>
              <input class="input password" data-val="true" data-val-required="*" id="Password" name="Password" placeholder="密码" type="password" />
              <div class="pass-icon"></div>
              <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true" style="color:red"></span>
            </div>
            <div>
              <p> <input id="btnSubmit" type="button" value="登入专区" class="btn btn-primary" /> </p>
              <p class=""> <a class="text-danger" href="javascript:;"> 忘记「登入密码」 </a> <br /> <a href="javascript:;" class="text-danger">忘记「登入账号」 / 「登入密码」被锁码</a> </p>
            </div>
          </div>
        </form>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <form class="form" data-ajax="true" data-ajax-failure="ChangePasswordFailed" data-ajax-method="POST" data-ajax-success="ChangePasswordSuccess" role="form">
                <input name="__RequestVerificationToken" type="hidden" value="" />
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                  <h4 class="modal-title" id="myModalLabel"> 重新索取登入密码 </h4>
                </div>
                <div class="modal-body">
                  <div class="form-group">
                    <label for="Account"><label for="">账号</label></label>
                    <span class="field-validation-valid" data-valmsg-for="Account" data-valmsg-replace="true" style="color:red"></span>
                    <input class="form-control" data-val="true" data-val-required="*" id="Account" name="Account" placeholder="账号" type="text" value="" />
                  </div>
                  <div class="form-group">
                    <label for="LoginName"><label for="">使用者姓名</label></label>
                    <span class="field-validation-valid" data-valmsg-for="LoginName" data-valmsg-replace="true" style="color:red"></span>
                    <input class="form-control" data-val="true" data-val-required="*" id="LoginName" name="LoginName" placeholder="使用者姓名" type="text" value="" />
                  </div>
                  <div class="form-group">
                    <label for="ID"><label for="">身份证或护照号码</label></label>
                    <span class="field-validation-valid" data-valmsg-for="ID" data-valmsg-replace="true" style="color:red"></span>
                    <input class="form-control" data-val="true" data-val-required="*" id="YourID" name="ID" placeholder="身份证或护照号码" type="text" value="" />
                  </div>
                  <div class="form-group">
                    <label for="VerificationCode"> 验证码 </label>
                    <span class="field-validation-valid" data-valmsg-for="VerificationCode" data-valmsg-replace="true" style="color:red"></span>
                    <input class="form-control" data-val="true" data-val-required="*" id="VerificationCode" maxlength="4" name="VerificationCode" placeholder="验证码" type="text" value="" />
                    <img id="imgVerification" style="height:40px" src="/Adviser/Home/VerificationCode" alt="验证码" />
                    <button type="button" id="reload" class="btn btn-info btn-md"><span id="RefreshVerification" class="glyphicon glyphicon-refresh"></span></button>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭窗口</button>
                  <button class="btn btn-primary">确定送出</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<!--<script>
    $("#reload").click(function () {
        $('#imgVerification').attr('src', $('#imgVerification').attr('src') + '?' + Math.random());
        $("#VerificationCode").val("");
        $("#RefreshVerification").removeClass();
        $("#RefreshVerification").addClass("glyphicon glyphicon-refresh");
    });
</script>

<script type="text/javascript">
    $(function () { LoginInitization(); });
</script>-->

<style scoped>
  .may_login p a{
    color: #000;
  }
  .forex_content{
    width: 1200px;
    margin:0 auto;
    background: #fff;
    margin-top: 50px;
    padding-bottom: 100px;
  }
  .container {
    width: 970px!important;
  }
  .clearfix {
    display: block;
  }
  .text-danger{
    color: #000;
  }
  .may_title {
    width: 442px;
    margin: 120px auto 0;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    border: 1px solid #d0d0d0;
    border-bottom: 1px solid #b0b0b0;
    font-size: 22px;
    background: #e0e0e0;
    background: -moz-linear-gradient(top,#e0e0e0 0%,#e0e0e0 86%,#e0e0e0 86%,#ccc 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#e0e0e0),color-stop(86%,#e0e0e0),color-stop(86%,#e0e0e0),color-stop(100%,#ccc));
    background: -webkit-linear-gradient(top,#e0e0e0 0%,#e0e0e0 86%,#e0e0e0 86%,#ccc 100%);
    background: -o-linear-gradient(top,#e0e0e0 0%,#e0e0e0 86%,#e0e0e0 86%,#ccc 100%);
    background: -ms-linear-gradient(top,#e0e0e0 0%,#e0e0e0 86%,#e0e0e0 86%,#ccc 100%);
    background: linear-gradient(to bottom,#e0e0e0 0%,#e0e0e0 86%,#e0e0e0 86%,#ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0',endColorstr='#cccccc',GradientType=0);
  }
  .may_login {
    width: 442px;
    margin: 0 auto;
    background: #fff;
    padding: 20px 0 0 20px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 5px #999 inset;
    border: 2px solid #fff;
    border-top: 0;
  }
  .may_login div {
    width: 100%;
    float: left;
    padding-bottom: 20px;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
  }
  .may_login div i {
    font-size: 30px;
    color: #fff;
    background: #ddd;
    width: 79px;
    text-align: center;
    height: 59px;
    line-height: 59px;
    border: 1px solid #c6c6c6;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    float: left;
  }
  .may_login div input[type="text"], .may_login div input[type="password"] {
    width: 320px;
    height: 59px;
    padding: 10px;
    margin: 1px 0 0;
    float: left;
    border: 1px solid #c6c6c6;
    border-left: 0;
    border-radius: 0 5px 5px 0;
    color: #444;
    font-size: 15px;
  }
  .may_login div p {
    float: left;
    width: auto;
    line-height: 24px;
    margin: 0;
  }
  .may_login div input[type="button"] {
    font-size: 18px;
    padding: 13px 20px 10px;
    margin-right: 10px;
  }
</style>
